<template>

  <div class="app-container">
     <div class="centerStyle">
         <div>个人情况</div>
         <div>总体情况</div>
     </div>
    <div class="flexStyle">
      <div class="tileSpic">
        <div class="oneList">
        <div class="titleStyle">
          <span>客户名称</span><span>录音时长(分钟)</span>
        </div>
        <div v-for="(item, index) in oneList" :key="index">
          <span>{{ item.customerName!=null ? item.customerName : '-' }}</span><span>{{ item.validTimeCount!=null ? item.validTimeCount : '-'
            }}</span>
        </div>
      </div>
      <div class="twoList">
        <div class="titleStyle">
          <span>对接日期</span><span>录音时长(分钟)</span>
        </div>
        <div v-for="(item, index) in twoList" :key="index">
          <span>{{ item.groupTime!=null ? item.groupTime : '-' }}</span><span>{{ item.validTimeCount!=null ? item.validTimeCount : '-'
            }}</span>
        </div>
      </div>
      </div>
      <div class="tileSpic">
        <div class="thrList">
        <div class="titleStyle">
          <span>上传人</span><span>录音时长(分钟)</span>
        </div>
        <div v-for="(item, index) in thrList" :key="index">
          <span>{{ item.userName!=null ? item.userName : '-' }}</span><span>{{ item.validTimeCount!=null ? item.validTimeCount : '-'
            }}</span>
        </div>
      </div>
      <div class="fourList">
        <div class="titleStyle">
          <span>对接日期</span><span>录音时长(分钟)</span>
        </div>
        <div v-for="(item, index) in fourList" :key="index">
          <span>{{ item.groupTime!=null ? item.groupTime : '-' }}</span><span>{{ item.validTimeCount!=null ? item.validTimeCount : '-'
            }}</span>
        </div>
      </div>
      </div>
    </div>
  </div>

</template>

<script>
import { oneList, twoList, thrList, fourList, listCustomer, getCustomer, delCustomer, addCustomer, updateCustomer } from "@/api/system/summarize";
import { getToken } from "@/utils/auth";

export default {
  name: "Customer",
  data() {
    return {
      oneList: [],
      twoList: [],
      thrList: [],
      fourList: [],
      salesSelect: '',
      activeTab: 'tab1',
      loading: false,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  created() {
    this.getList();
  },
  methods: {

    handleTabChange() {
      this.loading = true;
      // 模拟加载过程
      setTimeout(() => {
        this.loading = false;
      }, 300); // 300毫秒后加载完成
    },

    // 删除
    handleDeleteAudio(row) {
      console.log('删除')
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除该分段？').then(function () {
        return delCustomer(ids);
      }).then(() => {
        // this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    // 点击确定
    AxcureBtn() {
      console.log('点击了确定')
      // this.openSelect = false
    },

    // 取消
    cancelBtn() {
      this.openSelect = false
    },

    //  选择客户
    handleSelect(row) {
      this.openSelect = true
    },

    // 上传文件相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    beforeUpload(file) {
      console.log(file)
    },

    onSuccess(file) {
      console.log('file', file)
    },

    // 上传音频限制
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制只能上传一个文件`);
    },

    // 选择音频
    handleSelectionChangeXunjia(val) {
      this.multipleSelection = val;
    },

    // 点击某一行 勾选或者取消复选框
    handleRowChick(row) {
      const selected = this.multipleSelection.some((item) => item.inquiryId === row.inquiryId)
      if (!selected) {
        // 没有被选中
        this.multipleSelection.push(row)
        this.$refs.multipleTable.toggleRowSelection(row)
      } else {
        // 已勾选了,去除掉勾选
        const finArr = this.multipleSelection.filter((item) => {
          return item.inquiryId !== row.inquiryId
        })
        this.multipleSelection = finArr
        this.$refs.multipleTable.toggleRowSelection(row, false)
      }
    },

    // 点击取消
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
      // this.drawer = false
      // this.pusReturn = []
      console.log('multipleSelection', this.multipleSelection)
    },

    // 判断某一天是否勾选
    select(selection, row) {
      console.log('selection', 'row')
    },

    // 查看详情
    handleNew() {
      this.drawer = true
    },

    /** 查询客户信息列表 */
    getList() {
      // 第一个表
      oneList().then(res => {
        this.oneList = res.data
      })
      // 第二个表
      twoList().then(res => {
        this.twoList = res.data
      })
      // 第三个表
      thrList().then(res => {
        this.thrList = res.data
      })
      // 第四个表
      fourList().then(res => {
        this.fourList = res.data
      })
      // console.log('隐藏了客户列表')
      // this.loading = false
      // this.customerList = this.customerListTT
      // // this.loading = true;
      // // listCustomer(this.queryParams).then(response => {
      // //   this.customerList = response.rows;
      // //   this.total = response.total;
      // //   this.loading = false;
      // // });

    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        customerName: null,
        contactName: null,
        phone: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增客户";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCustomer(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户信息";
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCustomer(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCustomer(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除客户信息编号为"' + ids + '"的数据项？').then(function () {
        return delCustomer(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('system/customer/export', {
        ...this.queryParams
      }, `customer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>

<style>
.drawerStyle {
  padding: 24px;
}

.drawerBtmStyle {
  padding: 24px;
}

.btnEle {
  margin-top: 24px;
}

.divStyle {
  /* margin-bottom:36px; */
  padding: 0 24px 24px 24px;
}

.divStyle .el-button {
  padding: 14px 46px;
  font-size: 18px;
}

.table-title {
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

.custom-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 18px;
  color: #999;
}

.addMar {
  margin-bottom: 24px;
}

.flexStyle {
  display: flex;
  
}
.flexStyle .tileSpic{
   display: flex;
   flex:1;
   width:100%;
   margin-right: 24px;
}
.flexStyle .tileSpic:nth-child(2){
  margin-right:0 !important;
}

.flexStyle span {
  display: inline-block;
  line-height: 36px;
  text-align: center;
  color: #333;
  border: 1px solid #f1f1f2;
  flex:1;
  width:50%;
  font-size:14px;
}

.oneList,
.twoList,
.thrList,
.fourList {
  width:50%;
}

.titleStyle {
  background: #f5f6fa;
}
.centerStyle{
   display: flex;
   justify-content: space-around;
   margin-bottom:24px;
   font-weight:bold;
} 
.centerStyle div{
  /* flex:1; */
  text-align: center;
  width:50%;
  background:#f0f0f075;
  padding:12px 0 ;

}
.centerStyle div:nth-child(1){
  margin-right: 24px;
}

.oneList,.thrList{
  margin-right:20px;
}

</style>
